<template>
  <view class="course-header">
    <image src="/static/static/images/banner1.jpg" lazy-load></image>
    <view class="info">
      <view class="price-info">
        <text>￥425.00</text>
        <text>￥699.00</text>
        <text>优惠价</text>
      </view>
      <view class="title">Uniapp全家桶在线教育视频项目</view>
      <view class="count">
        <text class="iconfont icon-haoping2">100%好评</text>
        <text class="iconfont icon-touxiang2">1999人在学</text>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style lang="scss">
  page {
    background-color: #efefef;
  }
  .course-header {
    >image {
      display: block;
      width: 750rpx;
      height: 420rpx;
    }
    .info {
      margin: 25rpx 0;
      padding: 25rpx;
      background-color: #FFFFFF;
      .price-info {
        text {
          margin-right: 33rpx;
          &:first-child {
            color: $mxg-text-color-red;
            font-size: 46rpx;
            font-weight: bold;
          }
          &:nth-child(2) {
            color: #B6BBBF;
            font-size: 30rpx;
            text-decoration: line-through; // 删除线
          }
          &:last-child {
            color: $mxg-text-color-red;
            font-size: 20rpx;
            border: 1px solid $mxg-text-color-red;
            border-radius: 10rpx;
            padding: 0 3rpx;
          }
        }
      }
      .title {
        font-size: 35rpx;
        font-weight: bold;
        color: #1d1d1f;
        padding-left: 8rpx;
      }
      .count {
        padding: 15rpx 0;
        text {
          margin-right: 15rpx;
          font-size: 20rpx;
          color: #7d828f;
          border-radius: 30rpx;
          padding: 15rpx;
          background-color: $mxg-color-grey;
        }
      }
    }
  }
</style>
